<template>
  <div class="hotel">
    <div v-for="item in hotelInfo">
      <router-link to="/detailInfo" class="hotel-data">
        <div class="hotel-data-img">
          <img src="../assets/bgLoading.png" v-lazyload="item.imgUrl"/>
        </div>
        <div class="hotel-info">
          <div class="hotel-data-name">{{item.name}}</div>
          <div>
            <span class="hotel-info-score">{{item.score}}分</span>
            <span class="hotel-data-font">{{item.commentNum}}条评论</span>
          </div>
          <div class="hotel-data-font">{{item.address}}</div>
          <div class="hotel-data-price">¥{{item.price}}元</div>
        </div>
      </router-link>
    </div>
    <bottom></bottom>
  </div>
</template>

<script>
  import bottom  from '../components/bottom.vue';
  export default {
    name: '酒店',
    components:{
      'bottom' :　bottom
    },
    methods:{

    },
    data () {
      return {
          hotelInfo:[
            {imgUrl:'https://userimg.qunarzz.com/imgs/201112/20/JhS1_t5J7Kib42XUJ120.jpg',name:'万世名流酒店',price:'128',address:'北海市长青路一号',score:'4.8',commentNum:'150'},
            {imgUrl:'https://userimg.qunarzz.com/imgs/201111/16/JhS1_thFeRjBW4NKJ120.jpg',name:'太阳花酒店',price:'138',address:'北海市长青路一号',score:'4.8',commentNum:'150'},
            {imgUrl:'https://userimg.qunarzz.com/imgs/201406/17/Z7-ECTk_cj00XfwOZ120.jpg',name:'十渡醉山水农庄',price:'148',address:'北海市长青路一号',score:'4.8',commentNum:'150'},
            {imgUrl:'https://userimg.qunarzz.com/imgs/201611/21/C._M0DCiLK_S2AJQkbi120.jpg',name:'七天酒店',price:'158',address:'北海市长青路一号',score:'4.8',commentNum:'150'},
            {imgUrl:'https://userimg.qunarzz.com/imgs/201404/17/JhS1_t58s4aNkftmJ120.jpg',name:'如家酒店',price:'168',address:'北海市长青路一号',score:'4.8',commentNum:'150'},
            {imgUrl:'https://userimg.qunarzz.com/imgs/201608/29/JhS1_tbo00HL05DiJ120.jpg',name:'威尼斯酒店',price:'178',address:'北海市长青路一号',score:'4.8',commentNum:'150'},
            {imgUrl:'https://userimg.qunarzz.com/imgs/201608/29/JhS1_tbo00HL05DiJ120.jpg',name:'康佳酒店',price:'188',address:'北海市长青路一号',score:'4.8',commentNum:'150'},
          ]
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../commomCss/comomCss";
  .hotel{
    .hotel-data{
      display: flex;
      margin: torem(10px);
      .hotel-data-img{
        background-image: url('../assets/bgLoading.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        img{
          width: torem(150px);
          height: torem(150px);
        }
      }
    }
    .hotel-info{
      font-size: torem(18px);
      padding-left: torem(10px);
      flex: 1;
      .hotel-data-name{
        font-size: torem(20px);
        color: #333;
        text-overflow: ellipsis;
        overflow: hidden;
        width: 90%;
      }
      div{
        text-align: left;
        padding: torem(5px) 0;
        .hotel-info-score{
          color: red;
        }
      }
      .hotel-data-price{
        color: #06c1ae;
      }
      .hotel-data-font{
        color: #8c8c8c
      }
    }
  }

</style>
